<template>
  <div class="container">
    <!-- 左侧导航-->
    <div class="sidebar">
      <div class="title">XXXXX后台管理系统</div>
      <ul>
        <li>
          <!-- <router-link  to="/home">首页</router-link> -->
          <!-- <router-link  :to="{path:'/home'}">首页</router-link> -->
          <!-- <router-link  :to="{name:'home'}">首页</router-link> -->
          <!-- 传入参数 -->
          <!-- <router-link  to="/home?id=789">首页</router-link> -->
          <!-- <router-link  to="/home/456/789">首页</router-link> -->
          <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link to="/news">新闻</router-link>
        </li>
        <li>
          <router-link to="/manage">企业管理</router-link>
          <ul>
            <li>
              <router-link to="/manage/census"><span>统计管理</span></router-link>
            </li>
            <li>
              <router-link to="/manage/order"><span>订单管理</span></router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- 右侧主体 -->
    <div class="main">
      <div class="main-header fn-marginright">
        <button class="exit" @click="goBack">退出</button>
        <!-- <router-link class="exit" to="/login">退出</router-link> -->
      </div>
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router"; //vue-hooks

const router = useRouter(); //是全局路 由实例，包括了路由跳转方式，钩子函数等
//const route = useRoute(); //当前的路由信息

//编程式
const goBack = () => {
  //跳转
  router.push("/login");
  // router.push({path:'/login'});
  // router.push({name:'/login'});
};
</script>

<style scoped></style>
